<template>
  <div id="app"  class="counter-warp">

    <div class="xxs"> 固定前缀： <span class="gdqz">{{ tppre  }}</span>{{ topicname }}</div>
    <div class="xxi">
      <input class="clsinput"  v-model="topicname" placeholder="主题名称"/>
      <div class="xxcls">*</div>
    </div>
    <div class="rxc">
      格式：主题名称只允许2-20个小写英文字母，不允许任何其他字符,示例：mytopic
    </div>

    <div class="xxi">
      <div class="jianhaocls">
        <img class="jhcls" src="http://qiniuyun.bblog.site/jianhao.png" @click="fqjian1"/>
      </div>
      <input class="clsinput1"  v-model="partitionsum" placeholder="分区数" @input="pinputchange"/>
      <div class="jiahaocls">
        <img class="jhcls"  src="http://qiniuyun.bblog.site/jiahao.png"  @click="fqjia1"/>
      </div>
      <div class="xxcls">*</div>
    </div>
    <div class="rxc">
      格式：分区数在1-255之间的整数。分区增加则同消费组可支持消费者同比例增加。提高分区数可提高消息吞吐量。
    </div>

    <div class="xxi">
      <div class="jianhaocls">
        <img class="jhcls"  src="http://qiniuyun.bblog.site/jianhao.png" @click="fbjian1"/>
      </div>
      <input class="clsinput1"  v-model="replicationsum" placeholder="副本数"  @input="rinputchange"/>
      <div class="jiahaocls">
        <img class="jhcls"  src="http://qiniuyun.bblog.site/jiahao.png" @click="fbjia1"/>
      </div>
      <div  class="xxcls">*</div>
    </div>
    <div class="rxc">
      格式：副本数在1-4之间的整数。当kafka集群节点低于你所配置的副本数时会导致TOPIC创建失败，根据情况调低副本数。
    </div>

    <div class="xx">
      <textarea  v-model="remark" placeholder="备注TOPIC业务用途，少于50个字符"/>
      <div class="xxcls"></div>
    </div>
    <div class="rxc">
      红色 * 号为必填项
    </div>

    <div class="rxcf">
    </div>
    <!-- <span class="tips"></span> -->
    <a class="butclass" name="sure" @click="addTopic">确定添加</a>
    <mptoast />
  </div>
</template>

<script>
import { requestPost } from '@/utils/index'
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {
      topicname: '',
      partitionsum: 3,
      replicationsum: 2,
      remark: '',
      tppre: ''
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: 'TOPIC 添加'
    })
  },
  onShow () {
    this.getTppre()
  },
  methods: {
    pinputchange (msg) {
      this.partitionsum = 1
    },
    rinputchange (msg) {
      this.replicationsum = 1
    },
    fqjian1 () {
      if (this.partitionsum <= 1) {
        this.partitionsum = 1
        console.log('最低为1')
        return
      }
      this.partitionsum = this.partitionsum - 1
    },
    fqjia1 () {
      if (this.partitionsum >= 255) {
        this.partitionsum = 255
        console.log('最高255')
        return
      }
      this.partitionsum = this.partitionsum + 1
    },
    fbjian1 () {
      if (this.replicationsum <= 1) {
        this.replicationsum = 1
        console.log('最低为1')
        return
      }
      this.replicationsum = this.replicationsum - 1
    },
    fbjia1 () {
      if (this.replicationsum >= 4) {
        this.replicationsum = 4
        console.log('最高4')
        return
      }
      this.replicationsum = this.replicationsum + 1
    },
    getTppre () {
      this.tppre = wx.getStorageSync('tppre')
    },
    addTopic () {
      var reg = new RegExp(/^(?:[a-z]){2,20}$/)
      if (!reg.test(this.topicname)) {
        this.$mptoast('topic 格式错误')
        return
      }
      var reg1 = new RegExp(/^\+?[1-9][0-9]*$/)
      if (!reg1.test(this.partitionsum)) {
        this.$mptoast('分区数不能小于零')
        return
      }
      if (!reg1.test(this.replicationsum)) {
        this.$mptoast('副本数不能小于零')
        return
      }
      if (this.remark.trim().length > 50) {
        this.$mptoast('备注格式错误')
        return
      }
      var that = this
      var data = {
        'topicname': this.topicname,
        'partitionsum': this.partitionsum,
        'replicationsum': this.replicationsum,
        'remark': this.remark.trim(),
        'data': {
          'ct': 1
        },
        'openid': wx.getStorageSync('openid'),
        'token=': ''
      }
      wx.showLoading({
        title: '正在添加',
        mask: true
      })
      requestPost(wx.getStorageSync('requestUrl') + '/wxsys/createTopic', data, 'POST').then(function (value) {
        if (parseInt(value.error_code) === 1) {
          wx.showLoading({
            title: '添加失败' + value.msg,
            mask: true
          })
        } else {
          that.topicname = ''
          that.partitionsum = '3'
          that.replicationsum = '2'
          that.remark = ''
          wx.showLoading({
            title: '添加成功。若topic创建失败时可根据实际情况调低副本数量',
            mask: true
          })
        }
        setTimeout(function () {
          wx.hideLoading()
        }, 1500)
      }, function (value) {
        wx.showLoading({
          title: '添加失败',
          mask: true
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 1500)
      })
    }
  }
}
</script>

<style>
.gdqz{
  color: red;
  font-weight: bold;
}
.rxc{
  font-size: 16px;
  color: rgba(199, 201, 202, 0.658);
  padding-left: 10px;
  margin-bottom: 20px;
}
.rxcf{
  width: 100%;
  height: 50px;
}
.xxcls{
  float: left;
  width: 4%;
  color: red;
  border: 0px solid red;
}
.xx{
  padding: 10px;
  height: 150px;
  border: 0px solid red;
}
.xxs{
  padding-left: 10px;
  height: 30px;
  font-size: 18px;
  border: 0px solid yellow;
}
.xxi{
  padding: 10px;
  height: 50px;
  border: 0px solid yellow;
}
.tips{
  margin-top: 20px;
  margin-left: 5%;
  width: 99%;
  color: rgba(0, 0, 0, 0.315);
  font-size: 15px;
  float: left;
  border: 0px solid red;
  text-align: left;
}
.counter-warp {
  margin-top: 2px;
}
input{
  float: left;
  border: 1px solid rgba(128, 128, 128, 0.322);
  width: 90%;
  height: 50px;
}
.clsinput{
  float: left;
  border: 1px solid rgba(128, 128, 128, 0.322);
  width: 90%;
  height: 50px;
}
.clsinput1{
  float: left;
  border: 1px solid rgba(128, 128, 128, 0.322);
  width: 70px;
  height: 50px;
  text-align: center;
}
.jianhaocls{
  float: left;
  width: 50px;
  height: 50px;
  border: 0px solid rgba(128, 128, 128, 0.322);
}
.jiahaocls{
  float: left;
  width: 50px;
  height: 50px;
  border: 0px solid rgba(128, 128, 128, 0.322);
}
.jhcls{
  width: 50px;
  height: 50px;
}
textarea{
  float: left;
  border: 1px solid rgba(128, 128, 128, 0.322);
  width: 90%;
  height: 150px;
}
.butclass{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  color: rgb(14, 14, 22);
  background-color: rgb(57,156,201);
  position: fixed;
  bottom: 0px;
}
</style>
